<template>
     <Homeheader></Homeheader>
     <div id='app'>
        <div id="tab">
            <a-button shape="circle" size="big" :icon="h(ArrowLeftOutlined)" @click="router.push('/more')"/>
            <span style="display: inline-block;font-size: 2.5vw;font-weight: bold;margin-left: 2vw;">{{ infoTag }}</span>
        </div>
        <!-- infoTag=='商品销售' -->
        <div v-show="infoTag=='商品销售'" id="showInfo">
            <div id="tabBox">
                <div class="tablebox">
                <!-- 表格 -->
                    <table>
                        <tr>
                            <th>序号</th>
                            <th>菜名</th>
                            <th>总订单</th>
                            <th>利润</th>
                            <th>成本</th>
                        </tr>

                        <tr v-for="(item,index) in saleData" :key="index">
                            <td>{{ item._id }}</td>
                            <td>{{item.name}}</td>
                            <td>{{item.zdd}}单</td>
                            <td>￥{{item.lr}}</td>
                            <td>￥{{item.cb}}</td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
        <!-- infoTag=='销售库存' -->
        <div v-show="infoTag=='销售库存'" id="showInfo">
            <div id="tabBox">
                <div class="tablebox">
                <!-- 表格 -->
                    <table>
                        <tr>

                            <th>序号</th>
                            <th>菜名</th>
                            <th>补货时间</th>
                            <th>数量</th>
                            <th>序列号</th>
                        </tr>

                        <tr v-for="(item,index) in kucunData" :key="index">
                            <td>{{ item._id }}</td>
                            <td>{{item.name}}</td>
                            <td>{{item.date}}</td>
                            <td>{{item.num}}</td>
                            <td>{{item.code}}</td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
     </div>
</template>


<script setup lang='ts'>
import Homeheader from '@/views/pages/Homeheader.vue';
import { ref, h } from 'vue'
import { ArrowLeftOutlined } from '@ant-design/icons-vue';
import {useRoute,useRouter} from 'vue-router'
let route = useRoute()
let router = useRouter()
let infoTag = ref(route.query.type?route.query.type:"商品销售")
const kucunData = ref([
  {_id:'1', name: "张三", date: "20240602", num: 50, code: "1" },
  {_id:'2', name: "李四", date: "20240602", num: 50, code: "2" },
  {_id:'3', name: "王五", date: "20240602", num: 50, code: "3" },
  {_id:'4', name: "赵六", date: "20240602", num: 50, code: "4" }
]);
const saleData = ref([
  {_id:'1', name: "张三", zdd: 10, lr: 50, cb: 1 },
  {_id:'2', name: "李四", zdd: 20, lr: 50, cb: 2 },
  {_id:'3', name: "王五", zdd: 30, lr: 50, cb: 3 },
  {_id:'4', name: "赵六", zdd: 40, lr: 50, cb: 4 }
]);
</script>

<style scope>
#app{
    width: 100vw;
    height: 95vh;
    padding-top: 5vh;
    padding-bottom: 2vh;
    /* padding-left: 2vh; */
    padding-right: 2vh;
    background: #F5F5F5;

    box-sizing: border-box;
    #tab{
        margin-left: 2vw;
        margin-top: 2vh;
        box-sizing: border-box;
    }
    /* <!-- 当 infoTag=客户数据 时展示客户数据 --> */
    #showInfo{
     #tabBox{
         width: 100%;

         border-radius: 10px;
         background: white;
         margin: 20px auto;
         padding:10px;
         box-sizing: border-box;
         .tablebox {
             width: 95%;
             height: 85%;
             margin-left: 2%;
             margin-top: 2%;
             table {
             width: 100%;
             }

             th {
             background: #f2f2f2;
             border-radius:10px;
             width: 20%;
             height: 5%;
             padding: 20px;
             font-size: 20px;
             }

             /* // 给th添加鼠标悬浮样式 */
             tr:hover {
             background: #ddebf5;
             }

             td {
             padding: 19px;
             text-align: center;
             border-bottom: 1px solid #ddd;
             font-size: 20px;
             }
         }
     }
    }
}

</style>